<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="content-section" th:fragment="content">
    <h2><i class="fas fa-user-plus"></i> 办理入院</h2>
    <form id="admissionForm" class="admission-form">
        <div class="form-group">
            <label for="patientName">病人姓名</label>
            <input type="text" id="patientName" name="patientName" required>
        </div>
        
        <div class="form-group">
            <label>性别</label>
            <div class="radio-group">
                <label>
                    <input type="radio" name="patientGender" value="男" checked> 男
                </label>
                <label>
                    <input type="radio" name="patientGender" value="女"> 女
                </label>
            </div>
        </div>
        
        <div class="form-group">
            <label for="patientAge">年龄</label>
            <input type="number" id="patientAge" name="patientAge" min="0" required>
        </div>
        
        <div class="form-group">
            <label for="patientIdCard">身份证号</label>
            <input type="text" id="patientIdCard" name="patientIdCard" required pattern="\d{17}[0-9X]">
        </div>
        
        <div class="form-group">
            <label for="patientPhone">联系电话</label>
            <input type="tel" id="patientPhone" name="patientPhone" required pattern="\d{1,20}">
        </div>
        
        <div class="form-group">
            <label for="conditionDesc">病情描述</label>
            <textarea id="conditionDesc" name="conditionDesc" rows="4"></textarea>
        </div>
        
        <div class="form-group">
            <label for="floorNum">选择楼层</label>
            <select id="floorNum" required>
                <option value="">请选择楼层</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="wardNum">房间号</label>
            <select id="wardNum" required>
                <option value="">请先选择楼层</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="bedNum">床位号</label>
            <select id="bedNum" name="bedId" required>
                <option value="">请先选择房间</option>
            </select>
        </div>
        
        <div class="form-buttons">
            <button type="submit" class="submit-btn">确认入院</button>
            <button type="reset" class="cancel-btn">重置</button>
        </div>
    </form>
</div>

<script th:inline="javascript">
$(document).ready(function() {
    // 加载楼层列表
    loadFloors();
    
    // 楼层选择变化时加载房间
    $('#floorNum').change(function() {
        loadWards($(this).val());
    });
    
    // 房间选择变化时加载床位
    $('#wardNum').change(function() {
        loadBeds($(this).val());
    });
    
    // 表单提交
    $('#admissionForm').submit(function(e) {
        e.preventDefault();
        submitAdmission();
    });
});

// 加载楼层
function loadFloors() {
    $.get(/*[[@{/doctor/admission/floors}]]*/ '', function(floors) {
        var select = $('#floorNum');
        select.find('option:not(:first)').remove();
        
        floors.forEach(function(floor) {
            select.append($('<option>', {
                value: floor,
                text: floor + '楼'
            }));
        });
    }).fail(function(xhr) {
        alert('加载楼层列表失败');
    });
}

// 加载房间
function loadWards(floorNum) {
    if (!floorNum) return;
    
    $.get(/*[[@{/doctor/admission/wards}]]*/ '', { floorNum: floorNum }, function(wards) {
        var select = $('#wardNum');
        select.find('option:not(:first)').remove();
        
        wards.forEach(function(ward) {
            select.append($('<option>', {
                value: ward.wardId,
                text: ward.wardNum + '号房 (剩余床位: ' + ward.availableBeds + ')'
            }));
        });
    }).fail(function(xhr) {
        alert('加载病房列表失败');
    });
}

// 加载床位
function loadBeds(wardId) {
    if (!wardId) return;
    
    $.get(/*[[@{/doctor/admission/beds}]]*/ '', { wardId: wardId }, function(beds) {
        var select = $('#bedNum');
        select.find('option:not(:first)').remove();
        
        beds.forEach(function(bed) {
            select.append($('<option>', {
                value: bed.bedId,
                text: bed.bedNum + '号床'
            }));
        });
    }).fail(function(xhr) {
        alert('加载床位列表失败');
    });
}

// 提交入院信息
function submitAdmission() {
    // 获取表单元素
    var form = $('#admissionForm')[0];
    
    // 使用 HTML5 表单验证
    if (!form.checkValidity()) {
        alert('请填写所有必填字段，并确保格式正确');
        return;
    }

    // 收集表单数据
    var formData = {
        patientName: $('#patientName').val(),
        patientGender: $('input[name="patientGender"]:checked').val(),
        patientAge: $('#patientAge').val(),
        patientIdCard: $('#patientIdCard').val(),
        patientPhone: $('#patientPhone').val(),
        conditionDesc: $('#conditionDesc').val()
    };

    $.ajax({
        url: /*[[@{/doctor/admission}]]*/ '',
        type: 'POST',
        data: {
            ...formData,
            bedId: $('#bedNum').val()
        },
        success: function(response) {
            alert('入院办理成功！');
            form.reset();
            // 重置选择框
            $('#floorNum').val('');
            $('#wardNum').html('<option value="">请先选择楼层</option>');
            $('#bedNum').html('<option value="">请先选择房间</option>');
        },
        error: function(xhr) {
            var errorMsg = '入院办理失败';
            if (xhr.responseJSON) {
                if (xhr.responseJSON.details) {
                    // 显示具体的验证错误信息
                    errorMsg = Object.entries(xhr.responseJSON.details)
                        .map(([field, msg]) => `${field}: ${msg}`)
                        .join('\n');
                } else if (xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
            }
            alert(errorMsg);
        }
    });
}
</script>

<style>
.admission-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
}

.radio-group {
    display: flex;
    gap: 20px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.form-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

.submit-btn,
.cancel-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.submit-btn {
    background-color: #4CAF50;
    color: white;
}

.submit-btn:hover {
    background-color: #45a049;
}

.cancel-btn {
    background-color: #f44336;
    color: white;
}

.cancel-btn:hover {
    background-color: #d32f2f;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.form-group input:invalid,
.form-group select:invalid {
    border-color: #f44336;
}

.form-group input:invalid:focus,
.form-group select:invalid:focus {
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}
</style>
</body>
</html> 